<template>
	<view>
		<GuiPage
			:customHeader="checkOutStatus == 2 ? false : true"
			:isLoading="false"
			:headerStyle="checkOutStatus == 0 ? 'background-color:#FFFFFF' : ''"
			:statusBarStyle="checkOutStatus == 0 ? 'background-color:#FFFFFF' : ''"
			:customFooter="true"
			:fullPage="true"
			:footerSets="{ height: 140, zIndex: 100, bg: '' }"
			class="DrawerPage"
			:class="modalName == 'viewModal' ? 'show' : ''"
		>
			<view class="mx-2-5" slot="gHeader">
				<view class="gui-list" v-if="checkOutStatus == 0">
					<view class="gui-list-items" @tap="showModal" data-target="viewModal">
						<view class="gui-list-image ucenter-face gui-relative">
							<image class="gui-list-image ucenter-face-image" src="https://graceui.oss-cn-beijing.aliyuncs.com/faces/1.png" mode="widthFix"></image>
						</view>
						<view class="gui-list-body">
							<view class="gui-list-title">
								<text class="gui-list-title-text gui-list-one-line gui-primary-color">单行模式{{ checkOutStatus == 0 }}</text>
							</view>
						</view>
						<text class="gui-list-arrow-right "></text>
					</view>
				</view>
				<view class="gui-list" v-if="checkOutStatus == 1">
					<view class="gui-list-items">
						<view class="gui-list-arrow-right"></view>
						<view class="gui-list-body gui-text-center m-0"><text class="gui-h4 gui-bold">商品列表</text></view>
						<text class="gui-list-arrow-right ali-icon font-size-30"></text>
					</view>
				</view>
			</view>
			<view slot="gBody" class="index-box pb-5" :class="{ 'mt-2': checkOutStatus != 2 }">
				<!-- <view v-show="checkOutStatus == 0"><ComIndexPage></ComIndexPage></view> -->
				<view v-show="checkOutStatus == 1"><ComProductPage :personageProArr="personageProArr"></ComProductPage></view>
				<view v-show="checkOutStatus == 2"><ComHomePage></ComHomePage></view>

				<CustomerService />
			</view>
			<!-- 底部导航 -->
			<view slot="gFooter" class="mx-5 my-footer gui-nowrap gui-bg-white">
				<view class="mx-3 fx-f fx-f-ajc height-full">
					<view
						class="gui-relative fx-f-box-30 footer-box mx-1 fx-f-ajc"
						:class="[checkOutStatus == index ? 'my-footer-text' : '']"
						v-for="(item, index) in [1, 2, 3]"
						:key="index"
						@tap="changeFooter(index)"
					>
						<text class="ali-icon font-size-34" :class="[checkOutStatus == index ? 'my-footer-text' : '']">
							{{ index == 0 ? '&#xe666;' : index == 1 ? '&#xe663;' : '&#xe62e;' }}
						</text>
					</view>
				</view>
			</view>
		</GuiPage>
		<view class="DrawerClose" :class="modalName == 'viewModal' ? 'show' : ''" @tap="hideModal"><text class="cuIcon-pullright"></text></view>
		<scroll-view scroll-y class="DrawerWindow " :class="modalName == 'viewModal' ? 'show' : ''">
			<view style="height: 70vh;">
				<view class="gui-list-items mx-3">
					<view class="gui-list-image gui-relative width-120 height-120">
						<image class="gui-list-image width-120 height-120" src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/15.png"></image>
					</view>
					<view class="gui-list-body">
						<view class="gui-list-title"><text class="gui-list-title-text gui-primary-color gui-h3 gui-ellipsis gui-bold">橙丰启航店</text></view>
					</view>
				</view>
				<divider height="60rpx"></divider>
				<waves >
					<view class="gui-list-items mx-3">
						<text class="gui-list-icon gui-icons gui-secondary-color">&#xe61f;</text>
						<view class="gui-list-body ml-1 py-2">
							<view class="gui-list-title">
								<text class="gui-list-title-text gui-list-one-line gui-ellipsis gui-secondary-color">我的藏品</text>
							</view>
						</view>
					</view>
				</waves>
				<waves >
					<view class="gui-list-items mx-3">
						<text class="gui-list-icon gui-icons gui-secondary-color">&#xe61f;</text>
						<view class="gui-list-body ml-1 py-2">
							<view class="gui-list-title">
								<text class="gui-list-title-text gui-list-one-line gui-ellipsis gui-secondary-color">我的地址</text>
							</view>
						</view>
					</view>
				</waves>
				<waves >
					<view class="gui-list-items mx-3">
						<text class="gui-list-icon gui-icons gui-secondary-color">&#xe61f;</text>
						<view class="gui-list-body ml-1 py-2">
							<view class="gui-list-title">
								<text class="gui-list-title-text gui-list-one-line gui-ellipsis gui-secondary-color">店铺收藏</text>
							</view>
						</view>
					</view>
				</waves>
			</view>
			<!--滑动退出-->
			<!-- <tui-slide-verify @success="swtchSuccess"></tui-slide-verify> -->
			<view class="fx-f-ajc"> 
				<guiSlideToUnlock @unlock="swtchSuccess" :width="300" msg="安全退出" borderRadius="50rpx" blockColor="#FB7E22" msgUnlock="退出成功"></guiSlideToUnlock>
			</view>
		</scroll-view>
	</view>
</template>
<script>
import GuiPage from '@/components/guiCom/gui-page.vue';

// 首页
import ComIndexPage from './component/indexPage.vue';
// 产品
import ComProductPage from './component/productPage.vue';
// 个人中心
import ComHomePage from './component/homePage.vue';
// 客服组件
import CustomerService from '@/components/customerService/index.vue';

// 水波纹动画
import waves from '@/components/btcCom/waves.vue';
// 滑动退出
import guiSlideToUnlock from '@/components/guiCom/gui-slide-to-unlock.vue';
export default {
	data() {
		return {
			// tab 切换卡状态
			checkOutStatus: 1,
			// 产品数据
			personageProArr: [],
			// 轮播数据
			slideshowProArr: [],
			// 切换当前页面值
			modalName: null
		};
	},

	onReady: function() {},
	onLoad: function(option) {
		// console.log(option.index);
		// if (option && option.index) {
		// 	this.checkOutStatus = option.index;
		// }
		this.__init()
		// 提交订单测试
		// this.testFn()
	},
	methods: {
		testFn() {
			this.$HTTP.post('/app/ordersMgt/addOrderTable').then(res => {
				console.log(23356);
				// 调起支付接口
				uni.requestPayment({
					provider: 'wxpay', //微信支付
					timeStamp: res.data.timeStamp,
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: function(res) {
						console.log('支付成功');
					},
					fail: function(err) {
						console.log('支付失败');
					}
				});
			});
		},
		__init() {
			// this.$HTTP.post('/app/unauthorized/getUnauthorized', {}).then(res => {
			// 	this.personageProArr = res.data.personagePro;
			// 	this.slideshowProArr = res.data.slideshowPro;
			// });
			this.$HTTP.get('/mobile/product/lists').then(res => {
				this.personageProArr = res.data.lists;
			})
		},
		changeFooter: function(index) {
			if (this.checkOutStatus == index) return;
			this.checkOutStatus = index;
		},
		showModal() {
			this.modalName = 'viewModal';
		},
		hideModal(e) {
			this.modalName = null;
		},
		swtchSuccess(){
			console.log('活动成功！！')
		}
	},
	onPullDownRefresh() {
		uni.stopPullDownRefresh();
	},
	components: {
		GuiPage,
		ComIndexPage,
		ComProductPage,
		ComHomePage,
		CustomerService,
		waves,
		guiSlideToUnlock
	}
};
</script>
<style lang="scss" scoped>


page {
	/* background-image: var(--gradualBlue); */
	width: 100vw;
	overflow: hidden;
}

.DrawerPage {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0vw;
	// background-color: #f1f1f1;
	transition: all 0.4s;
}

.DrawerPage.show {
	transform: scale(0.9, 0.9);
	left: 85vw;
	box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
	transform-origin: 0;
}

.DrawerWindow {
	position: absolute;
	width: 85vw;
	height: 75vh;
	left: 0;
	top: 0;
	transform: scale(0.9, 0.9) translateX(-100%);
	opacity: 0;
	pointer-events: none;
	transition: all 0.4s;
	// padding: 100upx 0;
	// margin-top: 200rpx;
	padding-top: 200upx;
}

.DrawerWindow.show {
	transform: scale(1, 1) translateX(0%);
	opacity: 1;
	pointer-events: all;
}

.DrawerClose {
	position: absolute;
	width: 40vw;
	height: 100vh;
	right: 0;
	top: 0;
	color: transparent;
	padding-bottom: 30upx;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
	letter-spacing: 5px;
	font-size: 50upx;
	opacity: 0;
	pointer-events: none;
	transition: all 0.4s;
}

.DrawerClose.show {
	opacity: 1;
	pointer-events: all;
	width: 15vw;
	color: #fff;
}
/*  底部自定义 */
.my-footer {
	border-radius: 20rpx;
	height: 90rpx;
	margin-bottom: 50rpx;

	.footer-box {
		height: 60rpx;
	}

	.my-footer-text {
		border-radius: 15rpx;
		background-color: #ffe6d3;
		color: #ff4949;
	}

	.height-46 {
		height: 46rpx;
	}
}
</style>
